vue

2024-04-13 11:12| 来源: 网络整理| 查看: 265

1.首先，在终端中使用以下命令安装vue-video-player

npm install --save video.js vue-video-player

2.然后，在Vue.js组件中导入vue-video-player，并将其注册为组件

import { videoPlayer } from 'vue-video-player'; import 'video.js/dist/video-js.css'; import 'vue-video-player/src/custom-theme.css'; export default { name: 'LpVideoPlayerTest', components: { videoPlayer }, data() { return { playerOptions: {}, videoUrl: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' }; }, methods: { onPlayerReady(player) { console.log('Player is ready: ', player); player.src({ type: 'video/mp4', src: this.videoUrl }); } } };

3.在上面的代码中，onPlayerReady()方法将在打开视频播放器并准备好后调用。可以在此处执行任何其他操作以配置和访问播放器。

4.接下来，还需要确保vue-video-player正确加载。在main.js文件中，添加以下代码

import Vue from 'vue' import VideoPlayer from 'vue-video-player' import 'video.js/dist/video-js.css' import 'vue-video-player/src/custom-theme.css' Vue.use(VideoPlayer)

5.最后，尝试在Vue应用程序中使用刚刚创建的组件。

import MyVideo from './MyVideo.vue' export default { components: { MyVideo } }

6.效果图如下，当然没有调整宽高，有点丑啊

7.宽高调整如下

7.1在playerOptions中添加属性fluid:true，则自适应

7.2在playerOptions中添加属性fluid:false,width:300, height:300，则自定义宽高

【本文地址】

公司简介

联系我们